<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/12
  Time: 14:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
<html>
<head>
    <title>jQuery Ajax异步请求</title>
</head>
<body>
<%--1.a页面请求--没有参数传递--servlet（返回json数据）-a页面相应--%>
<h2> 1. a页面GET请求--没有参数传递--servlet(返回单个json数据) - a页面响应 </h2>
    <input class="btn1" type="button" value="test1">
        <script>
            $(".btn1").click(function () {
                $.ajax({
                    type:"GET", //HTTP传输方式
                    url:"test1",  //服务器URL
                    datatype:"json",  //返回的数据格式
                    success:function (data) { //服务器相映成功后 数据解析
                        console.log("服务器返回的数据:" +data);

                    }
                })
            })
        </script>
<%--2.a页面GET请求--参数传递--servlet（返回json数据）-a页面相应--%>
<h2>2. a页面GET请求--参数多个传递--servlet(返回单个json数据) - a页面响应</h2>
    <input class="btn2" type="button" value="test2">
        <script>
            $(".btn2").click(function () {
                var proPrice = 99;
                var proName = "大枸杞";

                $.ajax({
                    type:"GET",  //http传输方式
                    url:"test2",  //服务器url
                    datatype:"json",   //返回的数据格式
                    data:"pname="+proName+"&pprice="+proPrice,   //发送给服务器的参数 pname=大枸杞&pprice=99
                    success:function (data) {  //服务器相应成功后 数据解析
                        console.log("服务器返回的数据:"+data);

                    }
                })
            })
        </script>

<!--3.  a页面GET请求--参数传递--servlet(返回json，多个数据) - a页面响应 -->
<h2>3.  a页面请求--参数传递--servlet(返回json多个数据) - a页面响应</h2>
<input  class="btn3" type="button"  value="test3">
<script>
    $(".btn3").click(function () {
        var proPrice =88;
        var proName="爱疯11";

        $.ajax({
            type:"GET",         //HTTP 传输方式
            url:"test3",         //服务器URL
            datatype:"json",     //返回的数据格式
            data:"pname="+proName+"&pprice="+proPrice, //发送给服务器的参数
            success:function(data){         //服务器响应成功后，数据解析
                console.log("服务器返回的数据："+data);
                var d = JSON.parse(data);//JSON 转换成JS 字符
                console.log("服务器响应数据 status :" + d.status);
                console.log("服务器响应数据 message :" + d.message);
                console.log("服务器响应数据 result :" + d.result);
            }

        })
    });
</script>

<%--4.a页面POST请求--普通参数传递--servlet（返回json，对象数据）-a页面相应--%>
<h2> 4.a页面请求--参数传递--servlet(返回json多个数据)-a页面响应</h2>
职位:<span class="job">Java工程师</span>
城市:<span class="city">大上海</span>
薪资:<span class="salary">5000</span>
<br/>
<input class="btn4" type="button" value="test4">

<script>
    $(".btn4").click(function () {
        var job = $(".job").text();
        var city = $(".city").text();//此处可以在控制台获得参数值
        var salary =$(".salary").text();  //此处可以控制台获得参数值
        $.ajax({
            type:"POST",  //HTTP传输方式
            url:"test4",  //服务器url
            datatype:"json",  //返回的数据格式
            data:"job="+job+"&city="+city+"&salary="+salary,//发送给服务器的参数

            success:function (data) {  //服务响应成功后，数据分析
                console.log("服务器返回的数据:"+data);
                var d = JSON.parse(data);
                console.log("服务器响应数据 status:"+d.jobName);
                console.log("服务器相应数据 message:" + d.jobCity);
                console.log("服务器相应数据 result:" + d.jobSalary);

            }
        })
    })


</script>
/*5. a页面POST请求--表单参数传递--servlet（返回json，对象数据）--a页面相应---*/
<h2>5a页面请求--表单参数传递--servlet(返回json多个数据) - a页面响应</h2>
    <form id="job-form">
        职位: <input class="fjob" type="text" name="fjob"/><br/>
        城市: <input class="fcity" type="text" name="fcity"/><br/>
        薪资: <input class="fsalary" type="text" name="fsalary"/><br/>

    </form>
    <br/>
<input  class="btn5" type="button"  value="test5">
<script>
    $(".btn5").click(function () {
        var formdata = $("#job-form").serialize();  // fjob=Java工程师&fcity=苏州&fsalary=4000

        console.log("表单中的数据：" + formdata);  //此处可以控制台获得参数值


        $.ajax({
            type:"POST",         //HTTP 传输方式
            url:"test5",         //服务器URL
            datatype:"json",     //返回的数据格式
            data:formdata, //发送给服务器的参数

            success:function(data){         //服务器响应成功后，数据解析
                console.log("服务器返回的数据："+data);
                var d = JSON.parse(data);
                console.log("服务器响应数据 jobName :" + d.jobName);
                console.log("服务器响应数据 jobCity :" + d.jobCity);
                console.log("服务器响应数据 jobSalary :" + d.jobSalary);
            }

        })
    });
</script>


<!--6.  a页面POST请求--表单参数传递--servlet(返回json，responseData对象数据) - a页面响应 -->
<h2>6.  a页面请求--表单参数传递--servlet(返回json，responseData对象数据) - a页面响应</h2>
<form id="job-form2">
    职位：<input class="fjob2" type="text" name="fjob"/> <br>
    城市：<input class="fcity2" type="text"  name="fcity"/><br>
    薪资：<input class="fsalary2" type="text" name="fsalary"/><br>
</form>

<br/>
<input  class="btn6" type="button"  value="test6">

<script>
    $(".btn6").click(function () {
        var formdata = $("#job-form2").serialize();  // fjob=Java工程师&fcity=苏州&fsalary=4000

        console.log("表单中的数据：" + formdata);  //此处可以控制台获得参数值



        $.ajax({
            type:"POST",         //HTTP 传输方式
            url:"test6",         //服务器URL
            datatype:"json",     //返回的数据格式
            data:formdata,
            success:function(result){         //服务器响应成功后，数据解析
                console.log("服务器返回的数据："+result);
                var r = JSON.parse(result);
                console.log("服务器响应数据 jobName :" + r.data.jobName);
                console.log("服务器响应数据 jobCity :" + r.data.jobCity);
                console.log("服务器响应数据 jobSalary :" + r.data.jobSalary);
            }
        })
    });
</script>

</body>
</html>
